<template>
    <div>
        <section>
            <h3 class='mdl-title'>周末去哪儿</h3>
            <ul class='mdl-content'>
                <li v-for='item in list' :key="item.id">
                    <div class="item-img-box">
                       <img :src="item.imgUrl" alt="" class='item-img'>
                    </div>
                    <div class='item-info'>
                        <p class="item-title">{{item.title}}</p>
                        <p class='item-desc'>{{item.desc}}</p>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>
<script>
export default {
  name:"HomeWeekend",
  props:{
      list:Array
  }
}
</script>
<style lang="scss" scoped>
@import "~styles/_parameters.scss";
@import "~styles/mixins.scss";
    .mdl-title{
        background-color:$bgNormal;
        padding:.25rem;
        text-align:left;
    }

    .item-img-box{
       overflow:hidden;
       width:100%;
       height:0;
       padding-bottom:33.4%;
       background-color:$bgNormal;
    }
    .item-img{
       width:100%;
    }
    .item-info{
        text-align:left;
        padding:.1rem;
    }
    .item-title{
        @extend %ellipsis;
        font-size:.32rem;
        line-height:.54rem;
    }
    .item-desc{
        color:$textLightColor;
        line-height:.4rem;
        font-size:small;
    }

</style>
